<script setup>
    import { ref,reactive, computed } from 'vue'
    const isActive = ref(true)
    const hasError = ref(false)

    const classObject = reactive({
        active: true,
        'text-danger': false
    })

    const error = ref(null)

    const classObject2 = computed(() => ({
        active:isActive.value && !error.value,
        'text-danger': error.value && error.value.type == 'fatal'
    }))


    const activeClass = ref('active')
    const errorClass = ref('text-danger')


    const activeColor = ref('red')
    const fontSize = ref(30)

    const styleObject = reactive({
        color:'red',
        fontSize:'30px'
    })

    const overridingStyles = reactive({
        marginTop:'23px'
    })


</script>

<template>
    <div 
    class="static"
    :class="{ active: isActive,'text-danger':hasError }"
    >Hello world!</div>

    <div :class="classObject">你好世界！</div>
    <div :class="classObject2">你好世界！2</div>


    <h2>绑定数组</h2>
    <div :class="[activeClass,errorClass]">你好世界 数组</div>

    <div :class="[isActive ? activeClass : '',errorClass]">你好世界 三元表达式</div>

    <h2>绑定内联样式</h2>
    <div :style="{ color:activeColor,fontSize:fontSize + 'px'}">nihao shijie!</div>
    <p>直接绑定对象通常是一个好主意</p>
    <div :style="styleObject">nihao shijie!</div>

    <div :style="[styleObject, overridingStyles]">你好世界</div>

</template>

<style scoped>

</style>